<template>
  <Card class="profile" :bordered="false">
    <Tabs v-model:activeKey="activeKey" tabPosition="left" destroyInactiveTabPane>
      <TabPane v-for="tab in tabs" :key="tab.key">
        <template #tab>
          <span>
            <component :is="tab.icon" />
            {{ tab.title }}
          </span>
        </template>
        <component :is="tab.slot" />
      </TabPane>
    </Tabs>
  </Card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SettingOutlined, UserOutlined, DatabaseOutlined } from '@ant-design/icons-vue'

import BaseForm from './Base.vue'
import AuthForm from './Auth.vue'
import DataForm from './Data.vue'
import { Card, TabPane, Tabs } from 'ant-design-vue'

interface tabPane {
  key: string
  icon: any
  title: string
  slot: any
}

const activeKey = ref<string>('base')
const tabs: Array<tabPane> = [
  {
    key: 'base',
    icon: SettingOutlined,
    title: '基本设置',
    slot: BaseForm,
  },
  {
    key: 'auth',
    icon: UserOutlined,
    title: '个人设置',
    slot: AuthForm,
  },
  {
    key: 'data',
    icon: DatabaseOutlined,
    title: '数据安全',
    slot: DataForm,
  },
]
</script>

<style lang="less" scoped>
.profile {
  .form-card {
    padding: 1rem 0;

    .title {
      padding-left: 3rem;
      margin-bottom: 2rem;
    }
  }
}
</style>
